<template>
  <div class="app-container">
    <!-- 50是每一栏之间的间隔 -->
    <el-row :gutter="50">
      <el-col :span="15">
       <el-card :body-style="{ padding: '15px' }" style="" shadow="always">
          <div class="button-text">七天捕获域名统计图</div>
          <div class="chart" ref="chart" style="width: 850px;height: 450px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '20px' }" shadow="always">
          <div class="button-text">
            七日恶意域名占比
          </div>
          <div ref="bing" style="width: 430px;height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row  :gutter="30" style="padding-top: 20px;">
      <el-col :span="14">
      <el-card :body-style="{ padding: '10px' }" shadow="always">
        <div class="button-text">
          捕获恶意域名数随时间分布
        </div>
        <div ref="reli" style="width: 800px;height: 300px;"></div>
      </el-card>
      </el-col>

      <el-col :span="10">
      <el-card :body-style="{ padding: '10px' }" shadow="always">
        <div class="button-text">
          捕获最多TOP5
        </div>
          <el-table :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange">
            <el-table-column prop="top" label="排名" align="center" />

            <el-table-column prop="name" label="日期" align="center" />
            <el-table-column prop="value" label="捕获DGA数量" align="center" />
            <!-- <el-table-column prop="" label="名称" align="center" /> -->
            <!-- <el-table-column prop="rate" label="正常域名/恶意域名" align="center" /> -->

           <!-- <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="update(scope.row.id, scope.row.choosePeople)">配置</el-button>
              </template>
            </el-table-column> -->
          </el-table>
      </el-card>
      </el-col>
    </el-row>
  </div>


</template>
<script>
import echarts from 'echarts';
import 'echarts/map/js/china.js'
import resize from '@/views/dashboard/components/mixins/resize'


export default {
  data() {
    return {
      tableData:[
           {top: '1',  name: '2024-4-4', value: 889 },
           { top: '2',name: '2024-3-14', value: 650 },
           { top: '3',name: '2024-3-20', value: 415 },
           { top: '4',name: '2024-4-10', value: 403 },
           { top: '5',name: '2024-3-27', value: 317 },
           ],

      len: 10,
    }
  },
  mounted() {
    this.getData()
    this.getDateData()
    this.getReli()
  },
  methods: {
    getReli() {
      // 模拟数据start
       function getVirtulData(year) {
          year = year || '2017';
          var date = +echarts.number.parseDate(year + '-01-01');
          var end = +echarts.number.parseDate((+year + 1) + '-01-01');

          var s = +echarts.number.parseDate(year + '-03-16');
             var e = +echarts.number.parseDate(year + '-05-07');
             var e2 = +echarts.number.parseDate(year + '-06-14');
          
             var dayTime = 3600 * 24 * 1000;
             var data = [];
             // for (var time = date; time < end; time += dayTime) {
             //     data.push([
             //         echarts.format.formatTime('yyyy-MM-dd', time),
             //         Math.floor(Math.random() * 10000)
             //     ]);
             // }
            for (var time = date; time < end; time += dayTime) {
                    if(time<s) {
                      data.push([
                          echarts.format.formatTime('yyyy-MM-dd', time),
                          Math.floor((Math.random()/3) * 1000)
                      ]);
                    } else if(time>=s && time<=e) {
                      data.push([
                          echarts.format.formatTime('yyyy-MM-dd', time),
                          Math.floor(Math.random() * 1000)
                      ]);
                    } else if(time>e && time<=e2) {
                      data.push([
                          echarts.format.formatTime('yyyy-MM-dd', time),
                          Math.floor(Math.random()/2.5 * 1000)
                      ]);
                    }
                    else {
                      data.push([
                          echarts.format.formatTime('yyyy-MM-dd', time),
                          Math.floor(0 * 1000)
                      ]);
                    }
                  }
             console.log(data)
             return data;
          }
          
          
       // 模拟数据end
       let chartDom = echarts.init(this.$refs.reli);
       let option = {
          title: {
              top: 30,
              left: 'center',
              text: ''
          },
          tooltip: {},
          visualMap: {
              min: 0,
              max: 1000,
              type: 'piecewise',
              orient: 'horizontal',
              left: 'center',
              top: 65,
              textStyle: {
                  color: '#000'
              }
          },
          calendar: {
              top: 120,
              left: 30,
              right: 30,
              cellSize: ['auto', 13],
              range: '2016',
              itemStyle: {
                  borderWidth: 0.5
              },
              yearLabel: {show: false}
          },
          series: {
              type: 'heatmap',
              coordinateSystem: 'calendar',
              data: getVirtulData(2016)
          }
      };
      chartDom && chartDom.setOption(option);
      chartDom.resize();
      let sizeFun = () => {
        chartDom.resize();
      };
      window.addEventListener("resize", sizeFun);
      this.$once("hook:beforeDestroy", function () {
        echarts.dispose(chartDom);
      });
    },

     getDateData() {
       let chartDom = echarts.init(this.$refs.bing);
       let option = {
           tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b}: {c} ({d}%)'
           },
           legend: {
               orient: 'vertical',
               left: 5,
               data: ['恶意域名', '正常域名']
           },
           series: [
               {
                   name: '七日恶意域名占比',
                   type: 'pie',
                   radius: ['50%', '70%'],
                   avoidLabelOverlap: false,
                   label: {
                       show: false,
                       position: 'center'
                   },
                   emphasis: {
                       label: {
                           show: true,
                           fontSize: '30',
                           fontWeight: 'bold'
                       }
                   },
                   labelLine: {
                       show: false
                   },
                   data: [
                       {value: 100, name: '恶意域名'},
                       {value: 500, name: '正常域名'},
                   ]
               }
           ]
       };
       chartDom && chartDom.setOption(option);
       chartDom.resize();
       let sizeFun = () => {
         chartDom.resize();
       };
       window.addEventListener("resize", sizeFun);
       this.$once("hook:beforeDestroy", function () {
         echarts.dispose(chartDom);
       });

     },
     getData() {
       let chartDom = echarts.init(this.$refs.chart);

        let x = this.tableData
        x.sort((a, b) => b.value - a.value);
        let top10 = x.slice(0, this.len);
        let top10Names = top10.map(item => item.name);
        let top10Values = top10.map(item => item.value);

       let option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['DGA-simda', 'DGA-tinba', 'DGA-rovnix', 'DGA-banjori', '安全域名']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'DGA-simda',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'DGA-tinba',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'DGA-rovnix',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'DGA-banjori',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '安全域名',
            type: 'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

        chartDom && chartDom.setOption(option);
        chartDom.resize();
        let sizeFun = () => {
          chartDom.resize();
        };
        window.addEventListener("resize", sizeFun);
        this.$once("hook:beforeDestroy", function () {
          echarts.dispose(chartDom);
        });
     }



   }
}
</script>
<style>
.button-text {
      line-height: 18px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.45);
      font-size: 16px;
      margin-bottom: 12px;
    }
</style>
